@import url(./base.less);
@import url(./normalize.less);

@rootSize: 37.5rem;

body {
  background-color:#fff;
  padding: 0 (15 / @rootSize);
}
// 内容部分
.main {
  margin-bottom: (60 / @rootSize);
  .header {
    display: flex;
    align-items: center;
    height: (46 / @rootSize);
    margin-bottom: (10 / @rootSize);
    .left {
      width: (50 / @rootSize);
      font-size: (12 / @rootSize);
      color: #101010;
      // background-color: cyan;
      text-align: center;
    }
    .right {
      width: (50 / @rootSize);
      .pic {
        width: (24 / @rootSize);
        text-align: center;
        img {
          width: 100%;
          padding-left: (10 / @rootSize);
        }
      }
    }
    .center {
      flex: 1;
      padding: (10 / @rootSize) 0;
      position: relative;
      padding-bottom: (10 / @rootSize);
      .pic {
        position: absolute;
        top: (15 / @rootSize);
        left: (10 / @rootSize);
        width: (20 / @rootSize);
        height: (20 / @rootSize);
        img {
          width: 100%;
        }
      }
      input {
        border: 1px solid #a1a1a1;
        height: (32 / @rootSize);
        border-radius: (20 / @rootSize);
        padding-bottom: (10 / @rootSize);
        &::placeholder {
          font-size: (10 / @rootSize);
          padding-left: (40 / @rootSize);
        }
      }
    }
  }

  .banner {
    height: (140 / @rootSize);
    border-radius: (10 / @rootSize);
    margin-bottom: (10 / @rootSize);
    .pic {
      img {
        height: 100%;
      }
    }
    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      li {
        border-radius: (5 / @rootSize);
        background-color: #dedede;
        width: (8 / @rootSize);
        margin-left: (8 / @rootSize);
        margin-top: (3 / @rootSize);
        height: (5 / @rootSize);
      }
      .current {
        background-color: #101010;
      }
    }
  }
  .nav {
    height: (100 / @rootSize);
    justify-content: space-between;
    align-items: center;
    display: flex;
    img {
      width: (160 / @rootSize);
      height: (70 / @rootSize);
    }
  }

  .title {
    height: (50 / @rootSize);
    display: flex;
    justify-content: space-between;
    align-items: center;
    h4 {
      font-size: (18 / @rootSize);
    }
    i {
      font-size: (18 / @rootSize);
      color: #9a9a9a;
    }
  }

  .content {
    display: flex;
    justify-content: space-between;
    height: (190 / @rootSize);
    .left {
      .pic {
        width: (167 / @rootSize);
        height: (110 / @rootSize);
      }
      .text {
        font-size: (11 / @rootSize);
        h4 {
          font-size: (13 / @rootSize);
          margin-top: (15 / @rootSize);
          margin-bottom: (8 / @rootSize);
        }
        i {
          display: block;
          margin-top: (10 / @rootSize);
          color: #f49d0b;
        }
        p {
          color: #a1a1a1;
        }
      }
    }
  }

  .poster {
    height: (70 / @rootSize);
    padding-top: (7 / @rootSize);
    .pic {
      height: (57 / @rootSize);
      img {
        height: (57 / @rootSize);
      }
    }
  }

  .message {
    height: (50 / @rootSize);
    display: flex;
    justify-content: space-between;
    align-items: center;
    h4 {
      font-size: (18 / @rootSize);
    }
    .right {
      font-size: (12 / @rootSize);
      color: #9a9a9a;
      display: flex;
      align-items: center;
      .right_l {
        position: relative;
        .bot {
          position: absolute;
          bottom: -(6 / @rootSize);
          left: (6 / @rootSize);
          width: (10 / @rootSize);
          height: (4 / @rootSize);
          background-color: #0b9ceb;
          border-radius: (10 / @rootSize);
        }
        p {
          margin-right: (6 / @rootSize);
          color: #101010;
        }
      }
    }
  }

  .bigbox {
    .detail {
      height: (110 / @rootSize);
      margin-top: (10 / @rootSize);
      .left {
        display: flex;
        .pic {
          width: (110 / @rootSize);
          height: (80 / @rootSize);
          margin-right: (16 / @rootSize);
          img {
            width: (110 / @rootSize);
            height: (80 / @rootSize);
          }
        }
        .text {
          font-size: (11 / @rootSize);
          h4 {
            font-size: (13 / @rootSize);
            margin-bottom: (8 / @rootSize);
          }
          i {
            display: block;
            margin-top: (8 / @rootSize);
            color: #f49d0b;
          }
          p {
            width: (200 / @rootSize);
            color: #a1a1a1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .hid {
            margin: (6 / @rootSize) 0;
          }
          ul {
            display: flex;
            li {
              width: (45 / @rootSize);
              height: (15 / @rootSize);
              border: 1px solid #cfcfcf;
              border-radius: (5 / @rootSize);
              text-align: center;
              color: #cfcfcf;
              line-height: (15 / @rootSize);
              margin-right: (5 / @rootSize);
            }
          }
        }
      }
    }
  }
  .more {
    display: block;
    width: (260 / @rootSize);
    height: (38 / @rootSize);
    border-radius: (20 / @rootSize);
    background-color: #f2f2f3;
    margin: 0 auto;
    margin-top: (20 / @rootSize);
    font-size: (12 / @rootSize);
    text-align: center;
    line-height: (38 / @rootSize);
    color: #c3c3c3;
  }
  .brand{
    width: 100%;
    height: (85 / @rootSize);
    background-image: url(../imgs/gushirukou_home.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: (20 / @rootSize) 0;
  }
}

// 内容部分

// 底部
.footer {
  background-color: #fff;
  border-top: 1px solid #fff;
  margin-top: (60 / @rootSize);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: (50 / @rootSize);
  ul {
    display: flex;
    justify-content: space-around;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: (50 / @rootSize);
      i {
        font-size: (20 / @rootSize);
        padding-bottom: (5 / @rootSize);
        color: #c3c3c3;
      }
      span {
        font-size: (14 / @rootSize);
        color: #c7c7c7;
      }
    }
    .next{
      span,i{
        color: #101010;
      }
    }
  }
}
